import { useEffect, useState } from "react";
import React from "react";
import styles from "./Menu.module.css";
// let chosen = -1;
export function Menu(props: {
  rec: string[];
  onLeave: () => void;
  updateChosen: (val: number) => void;
  clickItem: (seq: number, val: string) => void;
  chosen: number;
  device: boolean;
}) {
  // length: number;
  // showMenu: boolean;
  const [li, setLi] = useState<{ arr: string[] }>({
    // length: 0,
    arr: [],
  });

  useEffect(() => {
    const newArr: string[] = li.arr;
    props.rec.forEach((el, index) => {
      newArr[index] = el;
    });

    setLi({
      // length: props.showMenu ? Math.min(props.rec.length, 10) : 0,
      arr: newArr,
    });
    // props.showMenu
  }, [props.rec]);
  return (
    <ul className={styles.ul} onMouseLeave={props.onLeave}>
      {/* 
      style={{
        height: li.length * (props.device ? 44 : 38) + 15 + "px",
      }}
       */}
      {li.arr.map((val, seq) => (
        <li
          key={val + "" + seq}
          tabIndex={seq + 2}
          className={[
            styles.item,
            props.chosen === seq ? styles.chosen : "",
          ].join(" ")}
          onMouseMove={() =>
            // chosen != seq ? ((chosen = seq), props.updateChosen(seq)) : ""
            props.updateChosen(seq)
          }
          // onMouseEnter={() =>
          //   chosen != seq ? ((chosen = seq), props.updateChosen(seq)) : ""
          // }
          onMouseUp={() => {
            props.clickItem(seq, val);
          }}
        >
          <span>{val}</span>
        </li>
      ))}
    </ul>
  );
}
